<template>
	<orh-table pages @on-add="addData" :pageDate="pageDate" @on-page-change="pageChange">

		<Table border :data="data" :columns="columns" slot="table" :loading="dataLoading"></Table>

		<orh-sidebar v-model="isShow" :title="titles" cover slot="others">
			<component :is="content" :condition="condition" @requery="requery"></component>
		</orh-sidebar>
	</orh-table>
</template>
<script lang="ts">
import { getModuleList, deleteData } from "~/logicLib/Teacher/officeRoom";
const OpenDrawer = () => import("./OpenDrawer.vue").then(m => m.default || m);
import { Component, Vue } from "vue-property-decorator";

@Component({
	name: "OfficeRoom",
	layout: "menu",
	components: {
		OpenDrawer
	},
	asyncData({ app }) {
		return getModuleList(app, { page: 1, limit: 10 }).then((value: any) => {
			if (value.status === 0) {
				return {
					pageDate: value.page,
					data: value.data,
					dataLoading: false
				};
			}
		});
	}
})
export default class TeacherOfficeRoom extends Vue {
	pageDate: Object = {
		total: 0,
		current_page: 1,
		per_page: 10
	};
	condition: number|boolean = false;
	prompt: boolean = false;
	loading: boolean = true;
	dataLoading: boolean = true;
	isShow: boolean = false;
	titles: string = '';
	content: string = 'OpenDrawer';
	data: any[] = [];
	columns: any[] = [
		{
			title: '部门名称',
			minWidth: 100,
			align: 'center',
			render:(h,params)=> {
				let str = params.row.department_name
				return h('span', JSON.parse(str).zh)
			}
		},
		{
			title: '楼宇名称',
			minWidth: 100,
			align: 'center',
			render:(h,params)=> {
				let str = params.row.buildings_name
				return h('span', JSON.parse(str).zh)
			}
		},
		{
			title: '单元名称',
			minWidth: 100,
			align: 'center',
			render:(h,params)=> {
				let str = params.row.unit_name
				return h('span', JSON.parse(str).zh)
			}
		},
		{
			title: '楼层名称',
			minWidth: 100,
			align: 'center',
			render:(h,params)=> {
				let str = params.row.floor_name
				return h('span', JSON.parse(str).zh)
			}
		},
		{
			title: '房间名称',
			minWidth: 100,
			align: 'center',
			render:(h,params)=> {
				let str = params.row.name
				return h('span', JSON.parse(str).zh)
			}
		},
		{
			title: '操作',
			key: 'operation',
			align: 'center',
			width: 150,
			render: (h, params) => {
				let taht = this
				return h('div', [
					h('Button', {
						props: {
							type: 'primary',
							size: 'small'
						},
						style: {
							marginRight: '5px'
						},
						on: {
							click: () => {
								taht.editData(params.row)
							}
						}
					}, '编辑'),
					h('Poptip', {
						props: {
							confirm: true,
							transfer: true,
							title: '您确定要删除这条数据吗?',
							type: 'error',
							size: 'small',
							placement:'left-end'
						},
						style: {
							textAlign: 'left',
						},
						on: {
							'on-ok': () => {
								taht.delData(params.row);
							}
						}
					}, [
						h('Button', {
							props: {
								type: 'error',
								size: 'small'
							}
						}, '删除')
					])
				]);
			}
		}
	];

	pageChange (page: number) {
		let that = this
		that.dataLoading = true
		getModuleList(that, { page, limit: 10 }).then((value: any) => {
			that.data = value.data
			that.pageDate = value.page
			that.dataLoading = false
		});
	};

	addData () {
		this.titles = '添加'
		this.condition = false
		this.isShow = true
	};

	editData (data: any) {
		this.titles = '修改'
		this.condition = data.id
		this.isShow = true
	};

	delData (data: any) {
		let that = this
		deleteData(that, data.id).then((value: any) => {
			that.pageChange (that.pageDate['current_page'])
		});
	};

	requery () {
		let that = this
		that.isShow = false
		that.dataLoading = true
		let page = this.pageDate['current_page']
		getModuleList(that, { page, limit: 10 }).then((value: any) => {
			that.data = value.data
			that.pageDate = value.page
			that.dataLoading = false
		});
	};
}
</script>

<style>
</style>
